<template>
	<view class="list-box">
	    <view class="image-left-box">
	        <view class="image-item" v-for="(item,index) in hotList" :key="index">
	            <view class="image-box" :style="{height:item.m0,backgroundImage:`url(${item['$orig'].url})`}">
	                <view class="image-rank-box cu-flex-center" :style="{background:item.m1}">
	                    <text v-if="index<=3">{{'TOP '+index+1}}</text>
	                </view>
	                <view class="image-info-box">
	                    <view class="image-info-box-item cu-flex-center">
	                        <image mode="aspectFit" src="/static/icons/size.png"></image>
	                        <text>{{item.m2+' 次下载'}}</text>
	                    </view>
	                    <view class="image-info-box-item-line"></view>
	                    <view class="image-info-box-item cu-flex-center">
	                        <image mode="aspectFit" src="/static/icons/collect1.png"></image>
	                        <text>{{item.m3+' 次收藏'}}</text>
	                    </view>
	                </view>
	            </view>
	            <text class="classify-name u-line-1">{{item.m4}}</text>
	            <text class="classify-tag u-line-1">{{item.m5}}</text>
	        </view>
	    </view>
	    <view class="image-right-box">
	        <view class="image-item" v-for="(item,index) in picList" :key="index">
	            <view class="image-box" :style="{height:item.m6,backgroundImage:`url(${item['$orig'].url})`}">
	                <view class="image-rank-box cu-flex-center" :style="{background:item.m7}">
	                    <text v-if="index<=3">{{'TOP '+index+1}}</text>
	                </view>
	                <view class="image-info-box">
	                    <view class="image-info-box-item cu-flex-center">
	                        <image mode="aspectFit" src="/static/icons/size.png"></image>
	                        <text>{{item.m8+' 次下载'}}</text>
	                    </view>
	                    <view class="image-info-box-item-line"></view>
	                    <view class="image-info-box-item cu-flex-center">
	                        <image mode="aspectFit" src="/static/icons/collect1.png"></image>
	                        <text>{{item.m9+' 次收藏'}}</text>
	                    </view>
	                </view>
	            </view>
	            <text class="classify-name u-line-1">{{item.m10}}</text>
	            <text class="classify-tag u-line-1">{{item.m11}}</text>
	        </view>
	    </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				classifyList:[],
				hotList:[],
				picList:[],
			};
		},
		created:function(){
			
			
		},
		computed: {
			showDpi: function() {
				return function(t, n) {
					var e = parseInt(t / 1e3), r = parseInt(n / 1e3);
					return e >= r ? e : r;
				};
			},
			imageHeight: function() {
				return function(t, n) {
					var e = n / t * 330;
					return parseInt(e) + "rpx";
				};
			},
			rankBgcolor: function() {
				return function(t) {
					return 0 == t ? "#EB5353" : 1 == t ? "#53A4EB" : 2 == t ? "#FFC02B" : "rgba(0,0,0,0)";
				};
			},
			showNum: function() {
				return function(t) {
					return t < 1e3 ? t : (t / 1e3).toFixed(2) + "k";
				};
			},
			showClassify: function() {
				return function(t) {
					var n = this;
					if (this.classifyList.length > 0 && t) {
						var e = [];
						return t.split(",").map(function(t) {
							n.classifyList.map(function(n) {
								n._id == t && e.push(n.name);
							});
						}), e.join(" · ");
					}
				};
			},
			showTags: function() {
				return function(t) {
					if (t) return t.split(",").join(" · ");
				};
			}
		},
		props: {
			list: {
				type: Array
			}
		},
		watch:{
			list:function(){
				let that = this
				let hotTmp = [];
				let hotTmpList = [];
				//console.log(this.list,'aaaa')
				let k1 = 0;
				let k2 = 0;
				this.list.forEach(function(val,key){
					if(key % 2 == 1){
						hotTmpList[k1] = {}
						hotTmpList[k1]['$orig'] = val
						hotTmpList[k1]['m6'] = key % 2 == 1 ? that.imageHeight(val.width, val.height) : null
						hotTmpList[k1]['m7'] = key % 2 == 1 ? that.rankBgcolor(key) : null
						hotTmpList[k1]['m8'] = key % 2 == 1 ? that.showNum(val.download_times) : null
						hotTmpList[k1]['m9'] = key % 2 == 1 ? that.showNum(val.collect_times) : null
						hotTmpList[k1]['m10'] = key % 2 == 1 ? that.showClassify(val.classify_ids) : null
						hotTmpList[k1]['m11'] =  key % 2 == 1 ? that.showTags(val.tag) : null
						k1++
					}
					if(key % 2 == 0){
						hotTmp[k2] = {}
						hotTmp[k2]['$orig'] = val
						hotTmp[k2]['m0'] = key % 2 == 0 ? that.imageHeight(val.width, val.height) : null
						hotTmp[k2]['m1'] = key % 2 == 0 ? that.rankBgcolor(key) : null
						hotTmp[k2]['m2'] = key % 2 == 0 ? that.showNum(val.download_times) : null
						hotTmp[k2]['m3'] = key % 2 == 0 ? that.showNum(val.collect_times) : null
						hotTmp[k2]['m4'] = key % 2 == 0 ? that.showClassify(val.classify_ids) : null
						hotTmp[k2]['m5'] =  key % 2 == 0 ? that.showTags(val.tag) : null
						k2++
					}
					
				})
				this.hotList = hotTmp
				this.picList = hotTmpList;
			}
		}
	}
</script>

<style>
.list-box {
    width: 750rpx;
    display: flex;
}

.image-left-box,.image-right-box {
    width: 375rpx;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
}

.image-left-box {
    padding-left: 30rpx;
}

.image-right-box {
    padding-right: 30rpx;
    -webkit-box-align: end;
    align-items: flex-end;
}

.image-self {
    width: 330rpx;
    background-color: transparent;
    border-radius: 10rpx;
    margin-bottom: 28rpx;
}

.image-item {
    margin-bottom: 40rpx;
}

.image-box,.image-item {
    width: 330rpx;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
}

.image-box {
    border-radius: 12rpx;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-box-pack: justify;
    justify-content: space-between;
}

.image-rank-box {
    width: 98rpx;
    height: 40rpx;
    background-color: #eb5353;
    border-radius: 0 20rpx 20rpx 0;
    font-size: 24rpx;
    display: flex;
    margin-top: 28rpx;
}

.image-info-box {
    width: 330rpx;
    height: 54rpx;
    background-color: rgba(20,20,20,.53);
    border-radius: 0 0 12rpx 12rpx;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
}

.image-info-box-item {
    -webkit-box-flex: 1;
    flex: 1;
}

.image-info-box-item image {
    width: 20rpx;
    height: 20rpx;
}

.image-info-box-item text {
    font-size: 18rpx;
    margin-left: 8rpx;
}

.image-info-box-item-line {
    width: 1px;
    height: 20rpx;
    background-color: hsla(0,0%,100%,.23);
}

.classify-name {
    font-size: 28rpx;
    margin-top: 18rpx;
}

.classify-tag {
    font-size: 20rpx;
    font-family: PingFang SC;
    color: #989898;
    margin-top: 10rpx;
}
</style>
